export default {
    props: {
        type: {
            type: String,
            default: 'normal'  // big, small, row
        },
        game: {
            type: Object,
            default: () => ({}),
        }
    },
    computed: {
        detailPath() {
            return `./detail.html?id=${this.game.gameId}`
        },
    },
    template: `
    <div>
        <a v-if="type === 'normal'" :href="detailPath" :aria-id="game.gameId" class="game">
            <div class="game-logo">
                <img class="game-logo_icon" :src="game.gameLogo" :alt="game.gameName"
                    loading="lazy">
            </div>
            <span class="game-name">{{game.gameName}}</span>
        </a>
        <a v-if="type === 'big'" :href="detailPath" class="big" :aria-id="game.gameId">
            <div class="big-logo">
                <img class="big-logo_icon" :src="game.gameDetailsImg" :alt="game.gameName"
                    loading="lazy">
            </div>
            <div class="big-content">
                <span class="big-name">{{game.gameName}}</span>
                <span class="big-play">Play {{game.gamePlayNumber / 1000}}K</span>
                <div class="view">VIEW</div>
            </div>
        </a>
        <a v-if="type === 'small'" :href="detailPath" class="small" :aria-id="game.gameId">
            <div class="small-logo">
                <img class="small-logo_icon" :src="game.gameLogo" :alt="game.gameName"
                    loading="lazy">
            </div>
            <div class="small-content">
                <span class="small-name">{{game.gameName}}</span>
                <span class="small-play">Play {{game.gamePlayNumber / 1000}}K</span>
            </div>
        </a>
        <a v-if="type === 'row'" :href="detailPath" class="row" :aria-id="game.gameId">
            <div class="row-logo">
                <img class="row-logo_icon" :src="game.gameLogo" :alt="game.gameName"
                    loading="lazy">
            </div>
            <div class="row-content">
                <span class="row-name">{{game.gameName}}</span>
                <span class="row-play">Play {{game.gamePlayNumber / 1000}}K</span>
            </div>
            <div class="view">VIEW</div>
        </a>
    </div>
    `
}